<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset="utf-8">
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <!-- iOS 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telephone=no, email=no"/>
    <!--开启对web app程序的支持-->
    <meta name="apple-touch-fullscreen" content="YES"/>
    <!-- 是否启用 WebApp全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title><?php echo $data['name'] ?></title>
</head>
<style>
    /*html {*/
    /*    font-size: calc(100vw / 750);*/
    /*}*/

    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .share {
        padding: 0 0.30rem;
        padding-bottom: 0.44rem;
    }

    .share_top {
        padding: 0.40rem 0rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-bottom: 0.02rem solid #f4f4f4;
    }

    .share_top h2 {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-size: 0.34rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #282828;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        margin-left: 0.32rem;
        margin-right: 0.64rem;
    }

    .share_top img {
        -o-object-fit: contain;
        object-fit: contain;
    }

    .share_article {
        padding-top: 0.38rem;
    }

    .share_aryicle_tilte {
        margin-bottom: 0.52rem;
    }

    .share_aryicle_tilte .user_img {
        width: 0.80rem;
        height: 0.80rem;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .share_aryicle_tilte h1 {
        font-size: 0.38rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #282828;
        margin-bottom: 0.22rem;
    }

    .share_aryicle_tilte p {
        font-size: 0.24rem;
        font-family: PingFangSC;
        color: #8E8E8E;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .share_article_info p {
        font-size: 0.30rem;
        font-family: PingFangSC;
        color: #444444;
        line-height: 0.60rem;
    }

    .share_article_info img {
        max-width: 6.90rem;
        height: auto !important;
        -o-object-fit: contain;
        object-fit: contain;
    }
</style>
<script>
    function set_font() {
        var html = document.getElementsByTagName('html')[0];
        var designFontSize = 100,
            designWidth = 750;

        function setFontSize() {
            var winWidth = document.documentElement.getBoundingClientRect().width;
            var fontSize = winWidth / designWidth * designFontSize;

            html.style.fontSize = fontSize + 'px';
        }

        setFontSize();

        window.addEventListener('resize', function () {
            setFontSize();
        });

        return this;
    }

    set_font();
</script>
<div class="share">
    <div class="share_article">
        <div class="share_aryicle_tilte">
            <h1><?php echo $data['name'] ?></h1>
            <p>
                <span style="display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center"><img class="user_img"
                                                                     src="https://www.thinkuprep.com<?php echo $data['pic'] ?>">&emsp;<?php echo $data['author'] ?>&emsp;发表于<?php echo date('Y-m-d', $data['createTime']) ?></span>
                <span style="display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center"><img style="width: 0.40rem;"
                                                                     src="/image/eye.png">&ensp;<?php echo $data['viewCount'] ?></span>
            </p>
        </div>
        <div class="share_article_info">
            <p><?php echo $data['content'] ?></p>
        </div>
    </div>
</div>